<template>
  <div class="bg">
    <div class="back" @click="$router.go(-1)">返回首页</div>
    <div class="apply-sq">
      <span style="font-size:0.53rem;
font-family:PingFang SC;
font-weight:bold;margin-top: 20px">资料填写</span>
      <div class="form-item">
        <span class="label">
          姓名
        </span>
        <input v-model="form.name" class="input-text" type="text">
      </div>
      <div class="form-item">
        <span class="label">
          性别
        </span>
        <div class="sex-bar">
          <div :class="form.sex==0?'left':'left-hover'" @click="select(1)">
            <img v-if="form.sex == 1" src="@/assets/boy_selected@2x.png" class="no-selected" alt="">
            <img v-if="form.sex == 0" src="@/assets/boy@2x.png" class="no-selected" alt="">
            <span style="font-size: 18px;font-weight: 400;" :style="form.sex==1?'color:#58E4CB':'color: #c8c8c8'">男</span>
          </div>
          <div :class="form.sex==1?'right':'right-hover'" @click="select(0)">
            <img v-if="form.sex == 1" src="@/assets/girl@2x.png" class="no-selected" alt="">
            <img v-if="form.sex == 0" src="@/assets/girl_selected@2x.png" class="no-selected" alt="">
            <span style="font-size: 18px;font-weight: 400;" :style="form.sex==0?'color:rgba(253,111,113,1)':'color: #c8c8c8'">女</span>
          </div>
        </div>
      </div>
      <div class="form-item">
        <span class="label">
          年龄
        </span>
        <input v-model="form.age"  class="input-text" type="number">
      </div>
      <div class="form-item">
        <span class="label">
          才艺
        </span>
        <input v-model="form.gift" class="input-text" type="text">
      </div>
      <div class="form-item">
        <span class="label">
          电话
        </span>
        <input v-model="form.telephone" class="input-text" type="number">
      </div>
      <div class="form-item">
        <span class="label">
          学校
        </span>
        <input v-model="form.school" class="input-text" type="text">
      </div>
      <div class="form-item">
        <span class="label">
          比赛宣言
        </span>
      </div>
      <input v-model="form.declaration" class="input-text" style="width: 7rem;margin-top: 0.5rem" type="text">
      <div class="btn" @click="submit">提交</div>
      <van-overlay :show="loading">
        <div style=" display: flex;align-items: center;justify-content: center;height: 100%;color: white;font-size: 16px">
          <van-loading type="spinner" />报名中....
        </div>
      </van-overlay>
    </div>
    <img src="../../assets/slide-up.png" style="width: 1rem;height: 1rem;position: absolute;bottom:0rem" :class="slide" alt="">
    <img src="../../assets/huodong.jpg" width="100%" height="auto" class="huodong" alt="">
  </div>
</template>

<script>
import sexSelect from '../../components/sex-select'
import {Toast} from 'vant'
import {apply} from '../../utils/api'
export default {
  name: 'index',
  data () {
    return {
      slide: 'slide-up',
      loading: false,
      form: {
        name: '',
        sex: 1,
        age: '',
        gift: '',
        telephone: '',
        school: '',
        declaration: ''
      }

    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
  },
  components: {
    sexSelect
  },
  methods: {
    handleScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      console.log(scrollTop)
      if (scrollTop <= 100) {
        console.log('ok')
        this.slide = 'slide-up'
      } else {
        this.slide = 'no-slide'
      }
    },
    select (e) {
      this.form.sex = e
    },
    submit () {
      console.log(this.form.telephone.length)
      console.log(this.checkIsNull(this.form))
      if (this.checkIsNull(this.form).length > 0) {
        Toast.fail('请确认信息填写完整')
      } else {
        if (this.form.telephone.length != 11) {
          Toast('请输入有效的手机号码')
        } else {
          this.loading = true
          apply(this.form).then(res => {
            console.log(res)
            if (res.code === 1) {
              this.loading = false
              Toast.success('报名成功')
            } else {
              this.loading = false
              console.log(this.form)
              Toast.fail('报名失败,请检查信息稍后重试')
            }
          }).catch(e => {
            this.loading = false
            console.log(this.form)
            Toast.fail('报名失败,请检查信息稍后重试')
          }).finally(() => {
            this.loading = false
          })
        }
      }
    },
    checkIsNull (obj) {
      return Object.keys(obj).filter(item => obj[item] == '')
    }
  },
  watch: {
    form: {
      deep: true,
      handler (newValue, oldValue) {
        if (newValue.age != '' && newValue.age <= 0) {
          this.form.age = 1
        }
        console.log(newValue)
      }
    }
  }
}
</script>
<style>
  /*.bg2{*/
    /*background: url("../../assets/huodong.jpg") no-repeat;*/
    /*background-size: cover;*/
  /*}*/
.no-slide{
  display: none;
}
  @keyframes slide {
    from  {
      bottom: 0rem;
    }
    to {
      bottom: 0.5rem;
    }
  }
  .huodong{
    width: 100%;
    height: auto;
    position: absolute;
    top: 100vh;
  }
  .slide-up{
    animation: slide 2s infinite;
  }
  .back{
    position: absolute;
    left: 0rem;
    top: 1rem;
    width: 2rem;
    height: 1rem;
    background: rgba(255,255,255,1);
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    color: rgba(0,0,0,0.7);
    line-height: 1rem;
    text-align: center;
    font-size: 0.32rem;
    z-index: 999;
  }
  input{
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    line-height: 0.49rem;
    font-size: 0.4rem;
  }
  input:focus{
    border: 0px solid black;
    border-bottom-width: 1px;
  }
</style>
<style scoped>
.btn:active{
 opacity: 0.5;
}
.btn{
  margin-top: 1rem;
  width:7.75rem;
  height:1.22rem;
  background:#FFCE08;
  box-shadow:0rem 0rem 0rem 0rem rgba(147,123,12,0.24);
  border-radius:1rem;
  color: white;
  font-size: 16px;
  line-height: 1.22rem;
  text-align: center;
}
.bg {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/bg2.png");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.apply-sq{
  width:8.61rem;
  height:14.58rem;
  background:rgba(255,255,255,1);
  opacity:0.97;
  box-shadow: 1px 1px 5px 5px rgba(0,0,0,0.2);
  border-radius:1rem;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}
  .form-item{
    width: 90%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.7rem;
  }
  .label{
    font-size:0.39rem;
    font-family:Adobe Heiti Std;
    font-weight:normal;
    color:rgba(170,170,170,1);
    line-height:0.49rem;
  }
  .input-text{
    margin-left: 0.5rem;
    height: 0.49rem;
    width: 6rem;
  }
.no-selected{
  position: relative;
  width: 0.56rem;
  height: 0.56rem;
  /*bottom: 0.2rem;*/
  margin-right: 0.2rem;
}
.sex-bar{
  width: 6rem;
  margin-left: 0.5rem;
  display: flex;
  justify-content: center;
}
.left{
  border: 0px solid #c8c8c8;
  height: 1rem;
  border-bottom-width: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background: url("../../assets/boy@2x.png") center no-repeat;*/
  /*background-size: contain;*/
  width: 50%;
}
.left-hover{
  border: 0px solid #58E4CB;
  border-bottom-width: 1px;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: url("../../assets/boy_selected@2x.png") center no-repeat;*/
  /*background-size: contain;*/
  width: 50%;
}
.right{
  border: 0px solid #c8c8c8;
  border-bottom-width: 1px;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: url("../../assets/girl@2x.png") center no-repeat;*/
  /*background-size: contain;*/
  width: 50%;
}
.right-hover{
  border: 0px solid rgba(253,111,113,1);
  border-bottom-width: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background: url("../../assets/girl_selected@2x.png") center no-repeat;*/
  /*background-size: contain;*/
  height: 1rem;
  width: 50%;
}
</style>
